Liquid Glass - Icon Composer Workflow 工作流程 (工具)

首先在你喜歡的設計工具中開始創作，匯出圖層後將它們匯入 Icon Composer，在那裡你可以調整玻璃材質、外觀模式以及平臺設定。接著你就可以儲存這個檔案並交付給 Xcode 了。

如果你用的是扁平風格圖形，建議使用支援向量繪圖的工具，這樣你就可以匯出 SVG 檔案，未來在 Icon Composer 中擁有更好的可縮放性。

開啟設計工具後，你需要設定正確的畫布尺寸。最簡單的方式是使用我們提供的應用圖示模板。這些模板適用於 Figma、Sketch、Photoshop 和 Illustrator，可以在 Apple Design Resources 網站上獲取。

如果你在為 iPhone、iPad 或 Mac 設計圖示，現在都使用相同的 1024 畫素畫布，並配有統一的新網格和圓角矩形圖示框架，這大大簡化了流程。而 Apple Watch 使用的是 1088 畫素畫布，尺寸略大於圓角矩形，以支援更好地視覺適配，同時採用相同的網格系統。

接下來你就可以開始用圖層來設計你的圖示了。本質上，每一層圖形代表一個“深度層級”，最底下是背景，其餘依次堆疊在上面，構成立體感和材質感。

在很多情況下，圖示結構非常簡單，例如“資訊”圖示，就是一個背景加一個前景。

有些圖示則具有更多層次，比如“家庭”圖示，就包含多個前景圖形和背景層疊。

除了按 Z 軸深度進行分層之外，將不同顏色的圖形分別放入獨立圖層，也會在 Icon Composer 中獲得最大的可控性。以“翻譯”圖示為例，兩個對話氣泡被放在兩個獨立圖層中，這是很好的起點。

如果我再把文字從氣泡中分離出來，就可以獲得更高的調整自由度。這樣要換成暗色圖示時，只改一層的顏色就好了，超快！

有些視覺細節可以等到 Icon Composer 裡再加，不用一開始就做滿。回到“翻譯”圖示，我覺得在兩個對話方塊的交疊處加點模糊效果，會讓它更有趣。再加點陰影，圖層就像漂起來一樣，更有層次。

因為這些圖層最後會使用液態玻璃材質構建，這些都是可以在 Icon Composer 中直接新增的動態屬性，如模糊、陰影、透明度等。包括鏡面高光、透明度與半透明感等特效，也都可以在 Composer 中動態設定。

所以不用一開始就把所有效果畫進去，先把圖畫得乾淨、平面一點就行，後面再加材質。

當圖稿設計完成之後，下一步就是將各個圖層匯出為 SVG 檔案。同軟體匯出的方式不一樣，用 Illustrator 的話我們有指令碼可以幫你一鍵匯出圖層。

匯出時記得保留畫布大小，這樣拉進 Icon Composer 後圖才不會偏。按 Z 軸（圖層堆疊順序）給檔案命名編號，Icon Composer 會自動識別這些順序並按序排列。不過沒編號也沒關係，進去之後你還是可以自己排。

背景色或漸變可以到時候在工具裡設，不用提前做進去。圖示裡有文字的話，匯出前要記得轉成圖形輪廓，不然字型會丟失。

要是用了漸變、照片或別的 SVG 不支援的內容，那就把圖層導成 PNG。PNG 是無損的，又能保留透明底，適合複雜的圖層內容。

還有一點，匯出圖的時候不要把圓角或圓形外框也導進去，工具自己會加的。就像這個 Siri 圖示，不要自己加邊框，系統會幫你裁成標準樣式。

比如日曆圖示上的數字，在比較窄的地方會顯得有點臃腫，不夠清晰。這時候可以把那一層的高光效果關掉，或者乾脆關掉玻璃材質，讓圖形更清楚。

系統自帶的中性陰影就很好看，適合所有背景，用起來很放心。

當圖示顏色很亮、背景是白色時，不妨試試用帶顏色的陰影，更有層次感。這種陰影讓顏色延伸到背景，看起來更像真實玻璃反光，效果很棒。你可以給不同模式設不同的陰影，比如暗色模式就繼續用中性陰影。

暗色模式下像“字典”圖示，如果不改顏色，可能完全看不清了。它的問題是：棕色標籤在暗底下不明顯，原來的亮紅色也沒了存在感。所以就要改顏色。不只是填色，像透明度、圖層混合模式也要考慮一起調整。如果你匯入的是 PNG 沒法改顏色，那就在設計軟體裡多做一個暗色版圖，再加進來當變體。

單色模式時，最好把圖示最顯眼的部分設成白色，這樣使用者一眼就能認出來。工具會自動把顏色轉成灰階，但你最好自己調一調，讓對比更清晰。

在做方形圖示和圓形圖示之間，其實大多數時候你都不用特地改東西。因為現在手錶用的圖示網格跟手機、平板是一樣的，而且視覺上畫布還更大一點。但要注意圓形圖示的構圖，有時候你得稍微調整下位置或比例才好看。

如果你原來圖案剛好頂到邊，那要記得在手錶圖示裡放大一點點，不然會留白太多。你也可以在設計圖裡加點“出血”區域，把圖案做得稍微大一點，這樣圓形圖示也能完整顯示。就像這個 Siri 圖示，不要自己加邊框，系統會幫你裁成標準樣式。

右上角的控制按鈕可以更換背景，幫助你在不同場景中測試圖示效果。你也可以試試加桌布，看圖示搭不搭、清不清楚。你還能開啟網格線、看光影怎麼動，也能放大細看或縮小看看小圖時清不清楚。

圖示已經不只是靜態圖了，而是會根據使用者和外觀模式變化，變得更豐富、更有表現力。圖示現在更有質感、更有生命，也更像整個體驗的一部分。

圖示做好後，存成 .icon 檔案，拖到 Xcode 裡，就能直接當 App 圖示用了！跑起 App 後你就能看到圖示在不同裝置和模式下的最終效果啦！